import { useEffect, useRef, useState } from 'react';
import { DrawPalette } from '../microPalette/DrawPalette';
import { EMarkTool } from '../microPalette/types/BasePalette.type';
const useInitPaletteEffect = (
  ref: React.RefObject<HTMLDivElement | null>,
  initPalate: (instance: DrawPalette) => void,
) => {
  const cachePaletteIns = useRef<DrawPalette | null>(null);
  const [paletteIns, setPaletteIns] = useState<DrawPalette | null>(null);

  useEffect(() => {
    if (!ref.current) return;
    if (cachePaletteIns.current) return;
    const paletteIns = new DrawPalette({
      wrapper: ref.current,
    });
    paletteIns.clear();
    paletteIns.setMarkTool(EMarkTool.AUTO_SELECT);
    cachePaletteIns.current = paletteIns;
    setPaletteIns(paletteIns);
    // setTimeout(() => {
    //   paletteIns.on('plateInit', (instance) => {
    //     alert('plateInit');
    //     console.log('plateInit', instance);
    //     initPalate(instance);
    //   });
    // }, 5000);
    initPalate(paletteIns);
  }, [ref]);
  return paletteIns;
};

export { useInitPaletteEffect };
